<template lang="">
  <div class="convert-warp">
      <mine-header>{{title}}</mine-header>
      <div class="page">
        <input type="text" placeholder="请输入兑换码" v-model="convert">
        <div class="complete">
          <button @click="completeAction">完成</button>
        </div>
      </div>
  </div>
</template>
<script>
import MineHeader from "@/views/Mine/com/mine-header.vue"
export default {
  components: {
    [MineHeader.name]:MineHeader,
  },
  data() {
    return {
      title: "兑换中心",
      convert:""
    }
  },
  methods: {
    completeAction() {
      console.log(this.convert);
      //1.获取输入框的值，发送请求
      //2.等待请i去结果，做出判断，然后提示
      //3.置空输入框内容
      this.convert = ""
     
    }
  }
}
</script>
<style lang="scss" scoped>
  .convert-warp{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #f4f6f9;
    top: 0;
    left: 0;
    z-index: 30;
    .page{
      height: 100%;
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 60px 0px;
      input{
        width: 70%;
        height: 30px;
        border: #4A73FF 2px solid;
        font-size: 14px;
      }
      .complete{
        width: 100%;
        padding: 100px 0;
        text-align: center;
        button{
        width: 80%;
        height: 44px;
        background-color: #4A73FF;
        color: #fff;
        border: 1px #4A73FF solid;
        border-radius: 5px;
        font-size: 16px;
     }
     }
      }

  }
</style>